<template>
	<view class="time-filter">
		<view class="flex jus-b" style="width: 600rpx; margin: 0 auto;align-items: center;color: gray;">
			<input disabled @focus="hideKeyborad" @input="setNull" :style="{
				border:selectIndex==1?'4rpx solid #ff8a9b':'4rpx solid transparent'
			}" @click="chooseTime(1)" class="inputer" placeholder="最早开课时间"
				:value="startTime" />
			<text style="margin: 0 20rpx;">——</text>
			<input :style="{
				border:selectIndex==2?'4rpx solid #ff8a9b':'4rpx solid transparent'
			}" disabled @focus="hideKeyborad" @input="setNull" @click="chooseTime(2)" class="inputer" placeholder="最晚开课时间"
				:value="endTime" />
		</view>
		<picker-view :value="value" v-show="selectIndex==1" immediate-change style="margin-top: 50rpx"
			:indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
			</picker-view-column>
		</picker-view>
		<picker-view :value="value" v-show="selectIndex==2" immediate-change style="margin-top: 50rpx"
			:indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
			</picker-view-column>
		</picker-view>
		<view class="confirm-button" @click="confirm"> 确定 </view>
	</view>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: "picker-view",
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				selectIndex: 0,
				startTime: '',
				endTime: ''
			}
		},
		methods: {
			hideKeyborad() {
				wx.hideKeyboard({
				  complete: res => {
				    console.log('hideKeyboard res', res)
				  }
				})
			},
			setNull() {
				return ''
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				if (this.selectIndex == 1) {
					this.startTime = `${this.year}/${this.month}/${this.day}`
				} else {
					this.endTime = `${this.year}/${this.month}/${this.day}`
				}
			},
			chooseTime(index) {
				this.selectIndex = index
			},
			confirm() {
				if (!this.startTime || !this.endTime) {
					uni.showToast({
						title: '请选择时间',
						icon: 'none'
					})
					return
				}
				this.$emit('select', [moment(this.startTime).format('x') / 1000, moment(this.endTime).format('x') / 1000])
			}
		},
	}
</script>
<style scoped>
	.picker-view {
		width: 450rpx;
		margin-top: 20rpx;
		margin: 0 auto;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.flex {
		display: flex;
	}

	.jus-b {
		justify-content: space-between;
	}

	.inputer {
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		text-align: center;
	}

	.time-filter {
		padding-top: 30rpx;
		display: grid;
		grid-template-rows: 140rpx auto 140rpx;
		height: 100%;
	}

	.confirm-button {
		background-color: #ff8a9b;
		color: white;
		bottom: 0;
		width: 90vw;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 100rpx;
		text-align: center;
		left: 50%;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>